<template>
	<view class="theboxs">
		<view class="adress">
			<view class="ress"><text class="moren">默认</text> 上海市 长宁区</view>
			<view class="ress">仙霞路956(悲鸿胪)</view>
			<view class="thenames">
				猪宝宝 15874131475
			</view>
			<image class="jiantou" mode="widthFix" src="/static/jiantou.png"></image>
		</view>

		<view class="detailbox">
			<view class="gooddetails">
				<view class="goods">
					<image
						src="https://img0.baidu.com/it/u=668011718,1832825629&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
					</image>

				</view>
				<view class="names">
					<view class="rightcontent">
						<view class="goodnamer">
							美孚(Mobil)美孚1号超金 先进.
						</view>
						<view class="miaoshu">超金OW-20 SP|4L</view>
						<view class="biaoqian">
							<view>原厂件</view>
							<view>原厂保证</view>
							<view>质保一年</view>
							<view>假一赔十</view>
						</view>
						<view class="prices">
							<view>
								<text>¥</text>
								<text>679.00</text>
							</view>
							<view>x12</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detailbox pricebox">
			<view class="lines">
				<view>商品金额</view>
				<view>¥679.00</view>
			</view>
			<view class="lines">
				<view>配送费</view>
				<view>¥0.00</view>
			</view>
			<view class="lines">
				<view>备注</view>
				<view><input type="text" placeholder="建议备注前与商家沟通确认"></view>
			</view>
			<view class="bottomprice">共1件，合计:￥<text>679</text>
				<text class="text2">.00</text>
			</view>
		</view>
		<view class="bottoms">
			<view class="lefts">
				<view>
					<view>共1件，</view>
					<view class="heji">合计:</view>
					<text class="red">￥679</text>
					<text class="text2s">.00</text>
				</view>
				<!-- <view>优惠减:¥0.00

					 <text>优惠明细</text>
				</view> -->
			</view>
			<view class="btns">提交订单</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {

		}
	},
	methods: {

	}
}
</script>

<style scoped>
.bottoms {
	position: fixed;
	bottom: 0;
	background: white;
	overflow: hidden;
	width: 100%;
	height: 145rpx;
	padding: 0 30rpx;
	box-sizing: border-box;

}

.btns {
	float: right;
	width: 183rpx;
	height: 76rpx;
	background: #000000;
	color: white;
	text-align: center;
	line-height: 76rpx;
	font-size: 30rpx;
	border-radius: 40rpx;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.bottoms .lefts {
	float: left;
	position: relative;
	width: 60%;
	top: 50%;
	transform: translateY(-50%);
}

.bottoms .lefts>view:nth-child(2) {
	color: #808080;
	font-size: 28rpx;
}

.bottoms .lefts>view:nth-child(2) text {
	color: #131313;
}

.heji {
	color: #131313;
}

.bottoms .lefts>view:nth-child(1) {
	color: #808080;
	display: flex;
	justify-content: left;
	font-size: 28rpx;
	line-height: 50rpx;
}

.bottomprice {
	text-align: right;
	font-size: 30rpx;
	margin-top: 20rpx;
}

.bottomprice text {
	font-weight: bold;
	font-size: 35rpx;
	color: rgb(255, 38, 0);
}

.bottomprice .text2 {
	font-weight: bold;
	font-size: 26rpx;
}

.lines {
	overflow: hidden;
	line-height: 70rpx;
	font-size: 30rpx;
}

.lines input {
	min-height: 70rpx;
	line-height: 70rpx;
	text-align: right;
	font-size: 30rpx;
}

.lines>view:nth-child(1) {
	float: left;
}

.lines>view:nth-child(2) {
	float: right;
	font-weight: bold;
}

.prices {
	width: 100%;
	margin-top: 20rpx;
	overflow: hidden;
	line-height: 39rpx;
}

.prices>view:nth-child(1) {
	float: left;
	color: rgb(255, 38, 0);
	font-weight: bold;
	font-size: 30rpx;
}

.red {
	font-weight: bold;
	font-size: 35rpx;
	color: rgb(255, 38, 0);
}

.text2s {
	font-weight: bold;
	color: rgb(255, 38, 0);
	margin-top: 7rpx;
}

.prices>view:nth-child(2) {
	float: right;
	font-size: 20rpx;
	color: #1f1f1f;
}

.detailbox {
	margin: 0 auto;
	width: 94%;
	background: white;
	border-radius: 16rpx;
}

.biaoqian {
	overflow: hidden;
	margin-top: 20rpx;
}

.biaoqian>view {
	float: left;
	padding: 5rpx 10rpx;
	box-sizing: border-box;
	border-radius: 10rpx;
	font-size: 20rpx;
	border: solid 1upx rgb(255, 72, 0);
	color: rgb(255, 72, 0);
	margin-right: 20rpx;
}

.biaoqian>view:nth-child(1) {
	border: solid 1upx rgb(0, 119, 255);
	color: rgb(0, 119, 255);
}


.miaoshu {
	color: #808080;
	font-size: 25rpx;
}

.names {
	float: left;
	padding-left: 20rpx;
	box-sizing: border-box;
	height: 100%;
	position: relative;
	width: 63vw;
	height: 180rpx;
}

.rightcontent {
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.goodnamer {
	font-weight: bold;
	font-size: 32rpx;
	color: #0e0e0e;
}

.gooddetails {
	width: 100%;
	margin: 0 auto;
	padding: 30rpx;
	height: 240rpx;
	display: flex;
	justify-content: left;
	justify-items: left;
	margin-top: 30rpx;
	box-sizing: border-box;
	position: relative;
}

.pricebox {
	box-sizing: border-box;
	padding: 30rpx;
	margin-top: 20rpx;
}

.goods {
	width: 180rpx;
	height: 180rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

.goods image {
	width: 100%;
	height: 100%;
}

.moren {
	background: linear-gradient(to right, #ff8902, rgb(255, 68, 0));
	padding: 5px 10rpx;
	border-radius: 11rpx;
	font-size: 22rpx;
	font-weight: 100;
	color: white;
}

.ress {
	font-weight: bold;
	line-height: 47rpx;
}

.thenames {
	margin-top: 20rpx;
	font-size: 25rpx;
}

.adress {
	position: relative;
	width: 94%;
	margin: 0 auto;
	padding: 30rpx;
	box-sizing: border-box;
	background: linear-gradient(to right, #e4e4e4, white);
	border-radius: 16rpx;
	border: solid 11rpx white;
}

.jiantou {
	position: absolute;
	right: 9rpx;
	top: 50%;
	width: 40upx;
	transform: translateY(-50%);
}

.theboxs {
	min-height: 100vh;
	background: #f6f6f6;
	padding-top: 30rpx;

}
</style>
